<template>
	<view class="recharge">
		<view class="visitor">
			<view class="outside">
				<view class="within">
					<view class="info">
						<view class="name">
							<text>{{infoData.name}}</text>
							<!-- <text class="classType">【门诊】</text> -->
							<view class="btn m-l-30" @click="showVisitCard=true">
								<img src="@/static/images/qiehuan.png" style="width:29rpx;margin-right:8rpx;"></img>
								切换就诊人
							</view>
						</view>
						<view class="cord">
							卡号
						</view>
						<view>{{$desensitizationNormalStr(infoData.cardNum)}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="moneyWrap">
			<view class="money">
				<view class="title">
					充值金额
				</view>
				<view class="moneyItems">
					<view :class="['item',activeIndex==index?'actives':'']" v-for="(item,index) in list"
						:key="item.value" @click="actives(index)">
						{{item.text}}
						<view class="svgIconWrap" v-if="activeIndex==index">

						</view>
						<img v-if="activeIndex==index" src="@/static/images/duigou.svg" class="svgIcon"></img>
					</view>
				</view>
				<view class="inputs">
					<view class="fh">￥</view>
					<u-input v-model.trim="money" placeholder="点击输入充值金额" />
				</view>
			</view>
		</view>
		<u-button v-if="user.bah" type="primary" class="summitBtn" style="width:90%;" @click.native="submitsByZyh">充值</u-button>
		<u-button v-else type="primary" class="summitBtn" style="width:90%;" @click.native="submits">充值</u-button>
		
		<!-- 切换就诊人 -->
		<u-popup :show="showVisitCard" :round="10" :safeAreaInsetBottom="true" mode="bottom">
			<switchVisitCard :visitData="visitList" :relations="relationTrans" @closeVisit="close" />
		</u-popup>
	</view>
</template>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
	import {
		getDictType
	} from "@/api/system/public.js";
	import {
		getPatientBaseData,
		getPatientBaseList
	} from "@/api/card/index.js"
	import switchVisitCard from '@/components/switchVisitCard/index.vue';
	import {
		encrypt,
		decrypt
	} from '@/utils/sm4Util.js'
	import {
		payUnifiedOrder
	} from "@/api/pay/index.js";
	import {
		getInpatientInfo
	} from "@/api/beInHospital/index.js"
	import { getSearchHzxx } from "@/api/beInHospital/index.js"
	export default {
		components: {
			switchVisitCard,
		},
		data() {
			return {
				user:{
					xm:'',
					bah:''
				},
				showVisitCard: false,
				visitList: [],
				infoData: {
					name: '',
					idNum: '',
				},
				money: '',
				list: [{
						text: '￥100',
						value: 100
					},
					{
						text: '￥200',
						value: 200
					},
					{
						text: '￥300',
						value: 300
					},
					{
						text: '￥500',
						value: 500
					},
					{
						text: '￥1000',
						value: 1000
					},
					{
						text: '￥2000',
						value: 2000
					},
				],
				activeIndex: null,
				relationTrans: {}
			}
		},
		onLoad(options) {
			if(options.xm && options.bah){
				this.user.xm = options.xm;
				this.user.bah = options.bah;
			}
		},
		onShow() {
			this.infoData = JSON.parse(uni.getStorageSync('currentVisitCard'))
			this.getDict()
			this.getCardList()
		},
		methods: {
			submits() {
				if (this.money == '') {
					this.$msg("请输入缴费金额")
					return
				}
				let params = {
					name: JSON.parse(uni.getStorageSync('currentVisitCard')).name || '',
					idNum: JSON.parse(uni.getStorageSync('currentVisitCard')).idNum || ''
				}
				/* 校验住院患者信息 */
				getInpatientInfo(params).then(ress => {
					let names = JSON.parse(uni.getStorageSync('currentVisitCard')).name
					let openid = uni.getStorageSync('openid') || ''
					let obj = {
						"hospitalCode": JSON.parse(uni.getStorageSync('hospital')).hospitalCode, //医院微信唯一标识
						"openId": openid, //微信唯一标识
						"bh": ress.data.zyh || '', //住院号/卡号
						"recipelNum": "", //处方号（门诊业务专用字段
						"orderAmount": this.money, //订单金额
						"orderDesc": "住院押金-" + names, //订单描述（医卡通，预约，门诊支付 住院押金）
						"payType": "weChat", //支付类型（weChat:微信 Alipay:支付宝）
						"orderType": "4" //订单类型（1医卡通，2预约，3门诊支付 4住院押金）
					}
					let param = {
						params:encrypt(JSON.stringify(obj))
					}
					payUnifiedOrder(param).then(res => {
						WeixinJSBridge.invoke('getBrandWCPayRequest', {
								"appId": res.data.appId,
								"timeStamp": res.data.timeStamp,
								"nonceStr": res.data.nonceStr,
								"package": res.data.package,
								"signType": "MD5",
								"paySign": res.data.paySign,
							},
							function(res) { // 调起微信支付成功
								if (res.err_msg == "get_brand_wcpay_request:ok") {
									alert("支付成功!", '提示');
								} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
									alert("用户取消支付!", '提示');
								} else {
									alert("支付失败,请重新支付!" + res.err_msg, "提示");
								}
							});
					})

				})
			},
			submitsByZyh() {
				if (this.money == '') {
					this.$msg("请输入缴费金额")
					return
				}
				/* 根据住院号校验住院患者信息 */
				getSearchHzxx(this.user).then(ress => {
					let names = JSON.parse(uni.getStorageSync('currentVisitCard')).name
					let openid = uni.getStorageSync('openid') || ''
					let obj = {
						"hospitalCode": JSON.parse(uni.getStorageSync('hospital')).hospitalCode, //医院微信唯一标识
						"openId": openid, //微信唯一标识
						"bh": ress.data.zyh || '', //住院号/卡号
						"recipelNum": "", //处方号（门诊业务专用字段
						"orderAmount": this.money, //订单金额
						"orderDesc": "住院押金-" + names, //订单描述（医卡通，预约，门诊支付 住院押金）
						"payType": "weChat", //支付类型（weChat:微信 Alipay:支付宝）
						"orderType": "4" //订单类型（1医卡通，2预约，3门诊支付 4住院押金）
					}
					let param = {
						params:encrypt(JSON.stringify(obj))
					}
					payUnifiedOrder(param).then(res => {
						WeixinJSBridge.invoke('getBrandWCPayRequest', {
								"appId": res.data.appId,
								"timeStamp": res.data.timeStamp,
								"nonceStr": res.data.nonceStr,
								"package": res.data.package,
								"signType": "MD5",
								"paySign": res.data.paySign,
							},
							function(res) { // 调起微信支付成功
								if (res.err_msg == "get_brand_wcpay_request:ok") {
									alert("支付成功!", '提示');
								} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
									alert("用户取消支付!", '提示');
								} else {
									alert("支付失败,请重新支付!" + res.err_msg, "提示");
								}
							});
					})
			
				})
			},
			/* 字典 */
			getDict() {
				getDictType({
					dictType: 'sys_relation'
				}).then(res => {
					if (res.code == 200) {
						res.rows.forEach(item => {
							this.relationTrans[item.dictValue] = item.dictLabel
						})
					}
				})
			},
			/* 关闭就诊人列表 */
			close() {
				this.infoData = JSON.parse(uni.getStorageSync('currentVisitCard'))
				this.showVisitCard = false
			},
			getData(id) {
				getPatientBaseData(encrypt(JSON.stringify({
					id: id
				}))).then(res => {
					this.infoData = res.data
				})
			},
			actives(i) {
				this.activeIndex = i
				this.money = this.list[this.activeIndex].value
			},
			getCardList() {
				let openid = uni.getStorageSync('openid') || ''
				let params = {
					hospitalCode: '',
					openId: openid,
				}
				getPatientBaseList(params).then(res => {
					if (res.code == 200) {
						this.visitList = res.rows
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
	}

	.recharge {
		width: 100%;

		.visitor {
			width: 100%;
			// background-color: rgb(92, 147, 249);
			background: url('@/static/images/report-small-bg.png') no-repeat left center, linear-gradient(180deg, rgba(197, 218, 255, 1) 0%, rgba(92, 147, 249, 1) 100%);
			background-size: auto 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx 24rpx 0 24rpx;
			color: #3C537D;

			.outside {
				width: 100%;
				background-color: #fff;
				padding: 12rpx 12rpx 0 12rpx;
				border-radius: 8px 8px 0 0;
				background: url('@/static/images/card_bg.png') no-repeat;
				background-size: 100% 100%;

				.within {
					border-radius: 8px 8px 0 0;

					.info {
						padding: 16rpx 28rpx 20rpx;
						font-size: 34rpx;

						.name {
							display: flex;
							align-items: center;

							.classType {
								display: inline-block;
								margin: 0 36rpx;
							}

							.btn {
								font-size: 28rpx;
								padding: 7rpx 14rpx;
								background: linear-gradient(90deg, rgba(77, 142, 255, 1) 0%, rgba(94, 150, 247, 1) 100%);
								color: #fff;
								display: flex;
								align-items: center;
								border-radius: 5px;
							}
						}

						.cord {
							font-size: 28rpx;
							padding: 16rpx 0 8rpx;
						}
					}
				}
			}
		}

		.summitBtn {
			position: fixed;
			bottom: 40rpx;
			left: 5%;
		}

		.moneyWrap {
			width: 100%;
			background: url('@/static/images/oneDay.png') no-repeat;
			background-size: 100% 100%;
			position: relative;
			color: #808080;
			top: -24rpx;
			padding: 24rpx 24rpx 0 24rpx;

			.money {
				background-color: #fff;
				border-radius: 8px;
				padding: 24rpx;
				margin-top: 10px;

				.title {
					font-size: 32rpx;
					margin-bottom: 16rpx;
					color: #333;
					margin-left: 10rpx;
				}

				.moneyItems {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.item {
						width: 30%;
						height: 135rpx;
						background-color: #F5F5F5;
						border-radius: 4px;
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 5px;
						font-size: 40rpx;
						position: relative;
						overflow: hidden;
						color: #333
					}

					.svgIconWrap {
						position: absolute;
						bottom: -38rpx;
						right: -38rpx;
						width: 72rpx;
						height: 72rpx;
						transform: rotate(45deg);
						-o-transform: rotate(45deg);
						-moz-transform: rotate(45deg);
						-webkit-transform: rotate(45deg);
						background: #4D8EFF;

						.svgIcon {}
					}

					.svgIcon {
						position: absolute;
						bottom: 6rpx;
						right: 6rpx;
						width: 20rpx;
						height: 20rpx;
					}

					.actives {
						background: #F1F6FF;
						color: #4D8EFF;
					}
				}

				.inputs {
					display: flex;
					align-items: center;

					.fh {
						font-size: 48rpx;
						font-weight: 600;
						color: #333;
						margin-left: 10rpx;
					}

					.u-input {
						border: none;

						::v-deep .u-input__content__field-wrapper__field {
							height: 80rpx;
						}

						::v-deep .uni-input-input {
							font-size: 64rpx;
						}
					}
				}
			}
		}

	}
</style>